<template>
  <view class="comment-item">
    <image
      class="avatar"
      :src="comment.user.avatar"
    />
    <view class="comment-main">
      <view class="comment-header">
        <view class="header-left">
          <view class="username-row">
            <text class="username">{{ comment.user.name }}</text>
            <text
              v-if="comment.user.role === 'author'"
              class="tag author"
              >作者</text
            >
            <text
              v-if="comment.user.role === 'first'"
              class="tag first"
              >首评</text
            >
          </view>
          <text class="date">{{ comment.date }}</text>
        </view>
        <view class="header-right">
          <view
            class="action"
            @click="toggleLike"
          >
            <image
              class="icon"
              :src="
                liked
                  ? '/static/icon/like_icon_active.png'
                  : '/static/icon/like_icon.png'
              "
            />
            <text class="action-num">{{ likeCount }}</text>
          </view>
          <view
            class="action"
            @click="$emit('reply', comment.id)"
          >
            <image
              class="icon"
              src="/static/icon/comment_icon.png"
            />
            <text class="action-num">{{ comment.commentCount }}</text>
          </view>
        </view>
      </view>
      <view class="comment-content">{{ comment.content }}</view>
      <view
        v-if="comment.replies && comment.replies.length"
        class="replies"
      >
        <view
          v-for="(reply, index) in displayReplies"
          :key="index"
        >
          <ReplyItem
            :reply="reply"
            @like="onReplyLike"
            @reply="onReplyReply"
          />
        </view>
        <view
          v-if="comment.replies.length > 2"
          class="expand-btn"
          @click="toggleExpand"
        >
          <text>{{
            isExpanded ? '收起' : `查看更多${comment.replies.length}条回复`
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import ReplyItem from './ReplyItem.vue'
  export default {
    name: 'CommentItem',
    components: { ReplyItem },
    props: {
      comment: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        isExpanded: false,
        liked: this.comment.liked,
        likeCount: this.comment.likeCount
      }
    },
    computed: {
      displayReplies() {
        if (!this.comment.replies) return []
        return this.isExpanded
          ? this.comment.replies
          : this.comment.replies.slice(0, 2)
      }
    },
    methods: {
      toggleExpand() {
        this.isExpanded = !this.isExpanded
      },
      toggleLike() {
        this.liked = !this.liked
        this.likeCount += this.liked ? 1 : -1
        this.$emit('like', this.comment.id)
      },
      onReplyLike(replyId) {
        // 嵌套冒泡
        this.$emit('like', replyId)
      },
      onReplyReply(replyId) {
        this.$emit('reply', replyId)
      }
    }
  }
</script>

<style scoped lang="scss">
  .comment-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 32rpx 32rpx 0 32rpx;
  }
  .avatar {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    background: #eee;
  }
  .comment-main {
    flex: 1;
  }
  .comment-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8rpx;
  }
  .header-left {
    display: flex;
    flex-direction: column;
  }
  .username-row {
    display: flex;
    align-items: center;
  }
  .username {
    color: #333333;
    font-size: 26rpx;
    font-weight: 600;
    margin-right: 12rpx;
  }
  .tag {
    font-size: 22rpx;
    border-radius: 4rpx;
    padding: 0 10rpx;
    margin-right: 8rpx;
    height: 32rpx;
    line-height: 32rpx;
    display: inline-block;
  }
  .author {
    background: #f45344;
    color: #fff;
  }
  .first {
    background: #2d72ff;
    color: #fff;
  }
  .date {
    color: #999999;
    font-size: 24rpx;
    margin-top: 2rpx;
  }
  .header-right {
    display: flex;
    align-items: center;
  }
  .action {
    display: flex;
    align-items: center;
    margin-left: 24rpx;
  }
  .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
  }
  .action-num {
    color: #666666;
    font-size: 22rpx;
  }
  .comment-content {
    color: #333333;
    font-size: 26rpx;
    margin-bottom: 12rpx;
  }
  .replies {
    background: #f7f8fa;
    border-radius: 12rpx;
    padding: 16rpx;
    margin-top: 8rpx;
  }
  .expand-btn {
    color: #999999;
    font-size: 24rpx;
    text-align: left;
    margin-top: 8rpx;
    cursor: pointer;
  }
</style>
